import React, { FC } from 'react'
import { NavBar, Space, Toast, Popover } from 'antd-mobile'
import { SearchOutline, MoreOutline, CloseOutline, LeftOutline } from 'antd-mobile-icons'
import { useLocation, useNavigate } from 'react-router-dom'
import {
    AntOutline,
    HandPayCircleOutline,
    ScanningOutline,
    TransportQRcodeOutline,
    UserOutline,
  } from 'antd-mobile-icons'
import { node } from 'prop-types'

const MyHead: FC<{
    title?: string,
    back?: boolean
    children?:any,
}> = ({
    title,
    back
}) => {
        // 获取路径
        const { pathname } = useLocation()
        // 跳转（-1）为返回上一级
        const navigate = useNavigate()
        const actions: any[] = [
            { key: 'scan', icon: <ScanningOutline />, text: '扫一扫' ,disabled:true},
            { key: 'payment', icon: <HandPayCircleOutline />, text: '付钱/收钱',disabled :true},
            { key: '/main/home', icon: <TransportQRcodeOutline />, text: '首页',disabled:pathname=='/main/home'},
            { key: '/main/mine', icon: <UserOutline />, text: '个人中心',disabled:pathname=='/main/mine' },
            { key: '/login', icon: <AntOutline />, text: '登录',disabled:pathname=='/login'  },
          ]
        const actionClick=(node:any)=>{
            console.log(node);
            navigate(node.key)
        }
        const HeadRight = () => {
            return (
                <div style={{ fontSize: 24, }}>
                    <Space style={{ '--gap': '16px' }}>
                        { 
                            // 判断 如果当前的路径 不等于  seacrch 就进入  等于 就不进入
                           pathname!="/seacrch" && <SearchOutline  fontSize={60} onClick={() => navigate('/seacrch')}  />
                        }
                        
                        <Popover.Menu
                            placement='bottom-start'
                            trigger='click'
                            mode='light' 
                            actions={actions}
                            onAction={actionClick}
                        >
                            <MoreOutline fontSize={44} />
                        </Popover.Menu>
                    </Space>

                </div>
            )
        }

        const HeadLeft = () => {
            return (
                back ? <div onClick={() => navigate(-1)}>
                    <LeftOutline /> 返回
                </div> : null
            )
        }
        return (
            <NavBar style={{
                '--border-bottom': '1px #ddd solid',
            }}
                right={HeadRight()}
                left={HeadLeft()}
                back={null}>
                {title}
            </NavBar>

        )
    }
MyHead.defaultProps = {
    title: "标题",
    back: true

}

export default MyHead